<html>
	<head>
		<title>jQuery Switchbutton</title>
		<link type="text/css" rel="stylesheet" href="../ui.switchbutton.min.css" />
		<link type="text/css" rel="stylesheet" href="./demo.css" />
		<script type="text/javascript" src="./jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="./jquery.tmpl.min.js"></script>
		<script type="text/javascript" src="./jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript" src="../jquery.switchbutton.min.js"></script>
		<script type="text/javascript" src="./demo.js"></script>
	</head>
	<body>
		<div id="page">
			<h3>jQuery Switchbutton</h3>
			<p class="listTitle">Checked by default</p>
			<input type="checkbox" class="common" id="switch1" checked="checked" />
			
			<p class="listTitle">Unchecked by default</p>
			<input type="checkbox" class="common" id="switch2" />
			
			<p class="listTitle">Disabled by default</p>
			<input type="checkbox" class="common" id="switch3" disabled="disabled" />
			
			<p class="listTitle">With a label</p>
			<input type="checkbox" class="common" id="switch4" checked="checked" />
			<label for="switch4">Click the label</label>
			
			<p class="listTitle">With some actions</p>
			<input type="checkbox" id="switch5" checked="checked" /><br />
			<span class="lightgrey actions" id="uncheck5">Uncheck -</span>
			<span class="lightgrey actions" id="check5">Check -</span>
			<span class="lightgrey actions" id="disable5">Disable -</span>
			<span class="lightgrey actions" id="enable5">Enable</span>
			
			<p class="listTitle">With custom labels and callbacks</p>
			<input type="checkbox" id="switch6" checked="checked" />
			
			<p class="listTitle">With custom options</p>
			<input type="checkbox" id="switch7" checked="checked" /><br />
			<span class="lightgrey">With &laquo; thin &raquo; class and labels set to false</span>
			<br /><br />
			<input type="checkbox" id="switch8" checked="checked" /><br />
			<span class="lightgrey">With &laquo; ios5 &raquo; class</span>
			
			<p class="listTitle" id="showCode">Show code</p>
			<div id="pageCode"><div class="javascript" style="font-family:monospace;"><ol><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">$<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #009966; font-style: italic;">/* Simple ones */</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.common:checkbox&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">switchbutton</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #006600; font-style: italic;">/* Switch 5: with check/enable actions */</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#switch5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">switchbutton</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#uncheck5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#switch5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prop</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;checked&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">change</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#check5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#switch5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prop</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;checked&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">change</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#disable5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#switch5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">switchbutton</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;disable&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#enable5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#switch5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">switchbutton</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;enable&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #009966; font-style: italic;">/* Switch 6: with custom labels and callbacks */</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#switch6&quot;</span><span style="color: #009900;">&#41;</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		.<span style="color: #660066;">switchbutton</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">			checkedLabel<span style="color: #339933;">:</span> <span style="color: #3366CC;">'YES'</span><span style="color: #339933;">,</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">			uncheckedLabel<span style="color: #339933;">:</span> <span style="color: #3366CC;">'NO'</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		.<span style="color: #660066;">change</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">			<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Switch 6 changed to &quot;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prop</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;checked&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;checked&quot;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;unchecked&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #009966; font-style: italic;">/* Switch 7: with custom options */</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#switch7&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">switchbutton</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		classes<span style="color: #339933;">:</span> <span style="color: #3366CC;">'ui-switchbutton-thin'</span><span style="color: #339933;">,</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		labels<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">false</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li></ol></div></div>
		</div>
		<div id="footer">
			<h3>jQuery Switchbutton</h3>
			<p class="lightGrey">
				Based on work by tdreyno on iphone-style-checkboxes for events management<br />
				(<a href="https://github.com/tdreyno/iphone-style-checkboxes" target="_blank">https://github.com/tdreyno/iphone-style-checkboxes)</a>
			</p>
			<p class="lightGrey">
				Copyright 2011, L.STEVENIN for <a href="http://www.naeka.fr/" target="_blank">Naeka</a><br />
				Released under the MIT license.
			</p>
			<br /><br />
			<p class="lightGrey">
				<h4>Requirements</h4>
				<a href="http://jquery.com/" target="_blank">jQuery 1.6+</a><br />
				<a href="http://api.jquery.com/category/plugins/templates/" target="_blank">jQuery Templates</a><br />
				<a href="http://jqueryui.com/download" target="_blank">jQuery UI Widget</a>
			</p>
		</div>
	</body>
</html>
